<template>
    <el-radio v-model="status" value="all">所有</el-radio>
    <el-radio v-model="status" value="completed">勾选</el-radio>
    <el-radio v-model="status" value="unCompleted">未勾选</el-radio>
    <el-divider />
    <template v-for="(item) in filteredTodos" :key="item.id">
        <el-checkbox :label="item.text" v-model="item.status" />
    </template>
    <el-divider />
    <el-input v-model="todos" placeholder="请输入内容" />
    <el-button :disabled="!todos" type="primary" @click="addTodos()">添加</el-button>
    <el-button type="primary" @click="resetTodos()">重置</el-button>
    <el-button type="primary" @click="addTodoss()">批量添加</el-button>
    <p>User 2: {{ getUserById(2) }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { storeToRefs } from 'pinia'
import { useTodosStore } from '@/store/index';
const todosStore = useTodosStore();
const { status, filteredTodos, getUserById } = storeToRefs(todosStore);
const todos = ref('');
todosStore.hello()
function addTodos() {
    if (todos.value) {
        todosStore.addTodo(todos.value);
        todos.value = '';
    }
}
function resetTodos() {
    todosStore.$reset();
}
function addTodoss() {
    todosStore.$patch((state) => {
        state.todos.push({ text: '批量添加1', id: state.id++, status: false });
        state.todos.push({ text: '批量添加2', id: state.id++, status: false });
        state.todos.push({ text: '批量添加3', id: state.id++, status: false });
        state.status = 'all'; // 重置状态为 all
    });
    // todosStore.$patch({
    //     status: 'all' // 重置状态为 all
    // });
}
</script>